<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>支付结果</title>
    <style type="text/css">
        body{
            margin: 0;
            background-color: #f2f2f2;
        }
        .box-pay {
            width: 100%;
            box-sizing: border-box;
            position:relative;
            height: 160px;
        }
        .alipay .box-pay {
            background: linear-gradient(45deg, #0070dc, #0e86f5);
        }
        .wxpay .box-pay {
            background: #38af53;
        }
        .box-pay .result {
            display: flex;
            align-items: center;
            margin: 0 auto;
            padding-top: 35px;
            width: 198px;
        }
        .box-pay .result img {
            width: 64px;
            margin-right: 10px;
        }
        .box-pay .line {
            width: 94%;
            background-color:rgba(0,0,0,0.25);
            border-radius:10px;
            height: 16px;
            position:absolute;
            bottom: 16px;
            left: 3%;
        }
        .box-ad {
            width: 88%;
            margin: -23px 6% 0 6%;
            background:#fff;
            position:relative;
            box-sizing: border-box;
            padding: 15px;
            min-height: 200px;
            margin-bottom: 20px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .box-ad .shadow {
            width: 100%;
            position:absolute;
            left: 0;
            top: 0;
            height: 1px;
            background:#fff;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .alipay .box-ad .shadow {
            box-shadow: 0 5px 10px rgba(0, 120, 236, 0.8);
        }
        .wxpay .box-ad .shadow {
            box-shadow: 0 5px 10px rgba(56, 175, 83, 0.8);
        }
        .box-ad .title {
            font-size: 16px;
            padding: 5px 30px 15px 30px;
            text-align: center;
            border-bottom: 1px dashed #ccc;
            color: #000;
            font-weight: bold;
        }
        .box-ad .img {
            width: 100%;
            margin-top: 15px;
            text-align: center;
        }
        .box-ad .img img {
            max-width: 100%;
            background-color: #f2f2f2;
        }
        .btn-finish {
            width: 60%;
            height: 40px;
            border-radius: 24px;
            border: none;
            color: #fff;
            margin: 120px auto 0 20%;
            box-shadow: 0 0 10px rgba(0, 120, 236, 0.3);
            font-size: 15px;
            letter-spacing: 5px;
            outline: none;
        }
        .alipay .btn-finish {
            background: #0078ec;
        }
        .wxpay .btn-finish {
            background: #38af53;
        }
    </style>
</head>
<body class="{$pay_type}" >

<div class="box-pay">
    <div class="result">
        <img class="success_logo" src="{:mediaUrl('/static/pay/success.png')}" />
        <div class="txt">
            <div style="letter-spacing: 2px; font-weight: 500; color: #fff;font-size: 22px;">支付成功！</div>
            <div style="font-size: 15px; color:#eee;">感谢您的支持</div>
        </div>
    </div>
    {notempty name="ad"}
    <div class="line"></div>
    {/notempty}
</div>
{notempty name="ad"}
<div class="box-ad">
    <div class="shadow"></div>
    {notempty name="ad['title']"}
    <div class="title">{$ad['title']}</div>
    {/notempty}
    {notempty name="ad['image']"}
    <div class="img">
        {notempty name="ad['link']"}
        <a href="{$ad['link']}"><img src="{$ad['image']}" /></a>
        {else/}
        <img src="{$ad['image']}" />
        {/notempty}
    </div>
    {/notempty}
</div>
{/notempty}

<button class="btn-finish" onclick="closeWindow()">完成</button>

<script>
    function closeWindow(){
        //关闭当前页面
        if (window.WeixinJSBridge) {
            window.WeixinJSBridge.call('closeWindow') // 微信
        } else if (window.AlipayJSBridge) {
            window.AlipayJSBridge.call('closeWebview') // 支付宝
        } else {
            window.close();
        }
    }
</script>
</body>
</html>